@use "@react-md/core/a11y";
@use "@react-md/core/colors";

@forward "@react-md/core" with (
  $color-scheme: system,
  $font-family: var(--roboto, Roboto, sans-serif),
  // $color-scheme: light,
  // $color-scheme: dark,
  // disabled since it makes debugging a bit easier by having all the css
  // variables in one block
  $disable-default-root-theme: true,
  $disable-default-system-theme: true,
  // $interaction-disable-ripple-inset-var: true,
  // $interaction-disable-ripple-border-radius-var: true,
  // $interaction-disable-surface-inset-var: true,
  // $interaction-disable-surface-border-radius-var: true,
  // $font-family: var(--roboto),
  $primary-color: colors.$teal-500,
  $secondary-color: colors.$pink-a-200,
  $icon-disable-font: true,
  $layout-navigation-breakpoint: "screen and (min-width: 1200px)",
  // $disable-rtl: true,
  // $box-grids: (
  //   small: (
  //     min: 2rem,
  //   ),
  //   half-padding: (
  //     padding: 0.5rem,
  //   ),
  //   extra-padding: (
  //     padding: 2rem,
  //     gap: 0.5rem,
  //   ),
   // )
);
